<template>
  <!-- 充值 -->
  <div class="recharge">
    <ContentTitle :info="info" />
    <!-- 搜索 -->
    <Search />
    <!-- 列表渲染 -->
    <TableList :tableData="tableData" />
    <!-- 分页 -->
    <div class="flex jc-c bg-fff pb-10 pt-10">
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as api from "../../api/index";
//组件
import ContentTitle from "../../components/ContentTitle.vue";
import Search from "./recharge/Search.vue";
import TableList from "./recharge/TableList.vue";
//组件 
const info = ref({
  text: "使用记录",
  type: "计费",
  msg: "统计当前账户每天消耗的消息额度总数，可查看历史月份的使用记录。",
});
//列表渲染
const tableData = ref([]);
const changeMonth = ref();
const getTableList = () => {
  let data = {
    currPage: currPage.value,
    pageSize: pageSize.value,
  };
  api.$feeRechargeList(data).then((res) => {
    tableData.value = res.data;
    total.value = res.total;
  });
};


//分页
const currPage = ref(1); //页数
const total = ref(0); //数据总数
const pageSize = ref(10); //一页数据数量
const changePage = (newPage) => {
  currPage.value = newPage;
  getTableList();
};
onMounted(getTableList);
</script>